<template>
	<view class="inviteFriends">
        <SRV-topbar title="员工列表" :isLeft="true"></SRV-topbar>
        <view class="searchInfo">
        	<view style="width: 20%;">关键词</view>
        	<view class="searchInput"><input type="text" placeholder-style="font-weight: 400;color:rgba(60,72,104,0.8)" value="" placeholder="请输入联系人姓名/电话" v-model="pageParam.userkey"/></view>
            <view class="btn" @click="searchFun()">搜索</view>
        </view>
        <view class="nav" v-if="navList.length > 0">
            <view @click.stop="getsel(index)" :class="nowLevel == index ? 'item sel' : 'item'" v-for="(item,index) in navList" :key="index">
                {{item.itemName}}
            </view>
        </view>
		<view v-for="(item,index) in list" :key="index" class="line">
			<view class="left">
				<image :src="item.head_portrait" mode="aspectFill"></image>
				<view class="txtContent">
					<view class="txt_top">
						<text class="oneline">{{item.name}}</text>
						<text class="oneline">{{item.mobile}}</text>
					</view>
                    <view class="txt_top">
                        <view>{{item.levelName}}</view>
                    </view>
                    <view class="txt_top">
                        <view>{{item.create_time}}</view>
                    </view>
                </view>
                <view class="btnDiv" v-if="isChange > 0">
                    <view class="btnItem" @click="editFun(item)" v-if="isChange >= 2">调整</view>
                    <view class="btnItem del" @click="delFun(item)" v-if="isChange >= 1">解绑</view>
				</view>
			</view>
		</view>
		<view v-if="list.length == 0" class="nocontent">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" ></image>
		</view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'" v-if="bindInfo.state == 1">
		    <view class="right" style="width:100%;">
		        <view class="pay" @click="showCode()"  style="width:100%;">{{bindInfo.title}}</view>
		    </view>
		</view>
        <uni-popup ref="pickupCode">
            <view class="show pickupCode-box">
                <view class="title">{{bindInfo.title}}</view>
                <image class="img" :src="bindInfo.imgUrl"></image>
                <view class="btn" @click="close()">
                    <text>确认</text>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="editLevel">
            <view class="show pickupCode-box">
                <view class="title">调整角色</view>
                <view class="showLine">
                    <view class="line2" @click="setLevel(item.itemType)" v-for="(item,index) in levelList" :key="index">
                    	<view :class="editItem.level == item.itemType ?'sel':'nosel'"></view>
                    	<text>{{item.itemName}}</text>
                    </view>
                </view>
                <view class="btn" @click="subEdit()">
                    <text>确认</text>
                </view>
            </view>
        </uni-popup>
	</view>
</template>

<script>
    var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
    import uniQrcode from '../static/wxqrcode.js';
	export default {
		data() {
			return {
                id: 0,
                type: 0,
                nowLevel: 0,
                editItem: {},
                navList: [],
				list: [],
                bindInfo: [],
                levelList: [],
                bottomHeight: 110,
                isChange: 0,
			}
		},
		methods: {
			getList(){
				serve.request({
					url: '/member/merchant/user-list',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
                        type: this.type,
                        id: this.id
                    },
                    v: '/v3'
				}).then(res => {
					_self.list = res.data.list;
					_self.bindInfo = res.data.bindInfo;
                    if(_self.bindInfo.codeUrl) {
                        _self.bindInfo.imgUrl = uniQrcode.createQrCodeImg(_self.bindInfo.codeUrl, {
                            size: parseInt(100) //二维码大小  
                        });
                    }
					_self.levelList = res.data.levelList;
                    _self.isChange = res.data.isChange;
                    _self.navList = [];
                    _self.navList[0] = {"itemType": 0, "itemName": "全部"};
                    _self.levelList.forEach((item, key) => {
                       _self.navList.push(item);
                    });
				});
			},
            getsel(index) {
                if(Number(index) == Number(this.nowLevel)) {
                    return ;
                }
                this.nowLevel = index;
                _self.type = _self.navList[index].itemType;
                _self.getList();
            },
            setLevel(level) {
                this.editItem.level = level;
                this.$forceUpdate();
            },
            editFun(item) {
                this.editItem = item;
                _self.$refs.editLevel.open();
            },
            subEdit() {
                serve.request({
                    url: '/member/merchant/edit-level',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: _self.id,
                        userId: _self.editItem.id,
                        level: _self.editItem.level,
                    },
                    v: '/v3'
                }).then(res => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                    if (res.code == 200) {
                        _self.getList();
                        _self.close();
                		_self.$forceUpdate();
                    }
                });
            },
            delFun(item) {
                uni.showModal({
                    title: '提示',
                    content: '您确定解绑该员工吗',
                    success: function(res) {
                        if (res.confirm) {
                            serve.request({
                                url: '/member/merchant/del-user',
                                data: {
                                    appkey: uni.getStorageSync('appkey'),
                                    'access-token': uni.getStorageSync('access-token'),
                                    id: _self.id,
                                    userId: item.id
                                },
                                v: '/v3'
                            }).then(res => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                                if (res.code == 200) {
                                    _self.getList();
                					_self.$forceUpdate();
                                }
                            });
                        }
                    }
                });
            },
            close() {
                _self.$refs.pickupCode.close();
                _self.$refs.editLevel.close();
            },
            showCode() {
                _self.$refs.pickupCode.open();
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(option) {
            if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
                this.bottomHeight = 178;
            }
            _self = this;
            _self.id = option.id || 0;
			_self.getList();
		},
		onPullDownRefresh() {
			_self.getList();
		}
	}
</script>

<style scoped lang="scss">
	.inviteFriends {
		.searchInfo {
		    padding: 10rpx 2%;
		    display: flex;
		    align-items: center;
		    .searchInput {
		        border: 1px solid #ccc;
		        width: 60%;
		        padding: 5rpx 0 5rpx 20rpx;
		        border-radius: 20rpx;
		    }
		    .btn {
		        width: 20%;
		        text-align: center;
		        border: 1rpx solid #ffd900;
		        background-color: #ffd900;
		        margin-left: 20rpx;
		        border-radius: 20rpx;
		    }
		}
		.nav {
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 40upx;
			border-top: 8upx #b1b1b3 solid;
			border-bottom: 8upx #b1b1b3 solid;
			.item {
				position: relative;
				height: 28upx;
				line-height: 28upx;
				width: 50%;
				text-align: center;
				opacity: 0.5;
				font-size: 36upx;
				border-right: 1upx rgba(60, 72, 104, 0.2) solid;
			}
		    
		    .sel {
		        font-weight: bold !important;
		        opacity: 1 !important;
		    }
		}
        .pickupCode-box {
            width: 80vw;
            background: #fff;
            border-radius: 8rpx;
        
            .title {
                width: 100%;
                text-align: center;
                color: #333333;
                height: 100rpx;
                line-height: 100rpx;
                font-size: 36rpx;
            }
        
            .img {
                width: 480rpx;
                height: 48rrpx;
                position: relative;
                left: 50%;
                margin-left: -240rpx
            }
            .showLine {
                padding: 20rpx;
                display: flex;
                .line2 {
                    box-sizing: border-box;
                    padding: 0 20rpx;
                    display: flex;
                    font-size: 28rpx;
                    color: #333333;
                    .nosel {
                        width: 36upx;
                        height: 36upx;
                        border: 1upx solid rgba(60, 72, 104, 1);
                        border-radius: 50%;
                        margin-right: 20rpx;
                    }
                    
                    .sel {
                        background-image: url(../static/img/check.png);
                        background-repeat: no-repeat;
                        width: 40upx;
                        height: 40upx;
                        background-size: 100%;
                        margin-right: 20rpx;
                    }
                    .txt {
                    	color: #999999;
                    }
                }
            }
        
            .pickupCode-t {
                width: 100%;
                text-align: center;
                height: 60rpx;
                line-height: 60rpx;
                letter-spacing: 8rpx;
                font-size: 40rpx;
            }
        
            .btn {
                width: 100%;
                height: 100rpx;
                text-align: center;
                line-height: 100rpx;
                font-size: 32rpx;
                color: #333333;
            }
        }
		.line {
			padding: 10rpx 30rpx;
			border-bottom: 8rpx rgba(57, 72, 107, 0.1) solid;

			.left {
				display: flex;
				align-items: center;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.txtContent {
                    width: 50%;
					margin-left: 30rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					.txt_top{
						display: flex;
						align-items: center;
                        .oneline {
                            margin-right: 20rpx;
                        }
					}
				}
			}
		}
		.bottom {
		    position: fixed;
		    justify-content: space-between;
		    align-items: center;
		    bottom: 0upx;
		    height: 100upx;
		    display: flex;
		    width: 100%;
		    background: #FFFFFF;
		
		    .right {
		        display: flex;
		
		        .add {
		            width: 236upx;
		            height: 100upx;
		            line-height: 100upx;
		            font-size: 32upx;
		            color: rgba(255, 255, 255, 1);
		            text-align: center;
		            background: rgba(255, 200, 10, 1);
		        }
		
		        .pay {
		            width: 236upx;
		            height: 100upx;
		            line-height: 100upx;
		            font-size: 32upx;
		            color: rgba(255, 255, 255, 1);
		            text-align: center;
		            background: #EB5938;
		        }
		        
		        .selling{
		            width: 472upx;
		            height: 100upx;
		            line-height: 100upx;
		            font-size: 32upx;
		            color: rgba(255, 255, 255, 1);
		            text-align: center;
		            background: #999;
		        }
		    }
		}
		.nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:28rpx;
				color:rgba(204,204,204,1);
			     margin-top: 30rpx;
			}
		}
        .btnDiv{
            width: 30%;
            .btnItem {
                background: #f9d400;
                text-align: center;
                border-radius: 20rpx;
                padding: 10rpx;
                letter-spacing: 10rpx;
                width: 50%;
                margin-left: 20%;
                margin-bottom: 10rpx;
            }
            .del {
                background: #fc0107;
                color: #fff;
            }
        }
	}
</style>
